<template>
  <div class="poup-box">
    <popup-box :title="title">
      <template #content>
        <div class="btns-row">
          <div
            :class="cindex === 1 ? 'btn-active' : 'btn'"
            @click="handleTabChange(1)"
          >
            <span>监测数据</span>
          </div>
          <div
            :class="cindex === 2 ? 'btn-active' : 'btn'"
            @click="handleTabChange(2)"
          >
            <span>报警信息</span>
          </div>
          <div
            :class="cindex === 3 ? 'btn-active' : 'btn'"
            @click="handleTabChange(3)"
          >
            <span>检定数据</span>
          </div>
        </div>
        <div v-show="cindex === 1" class="monitor-content">
          <div class="mbtns">
            <div
              :class="mindex === 1 ? 'mbtn-active' : 'mbtn'"
              @click="handleSubChange(1)"
            >
              数据
            </div>
            <div
              :class="mindex === 2 ? 'mbtn-active' : 'mbtn'"
              @click="handleSubChange(2)"
            >
              曲线
            </div>
          </div>
          <div v-show="mindex === 1" class="mcontent">
            <p>设备名称：{{ data && data[0].deviceName }}</p>
            <p>设备编号：{{ data && data[0].deviceNo }}</p>
            <p>所属地区：{{ data && data[0].area }}</p>
            <p>详细地址：{{ data && data[0].address }}</p>
            <p>业主手机号：{{ data && data[0].phone }}</p>
            <p>
              在线状态：<span
                :style="{
                  color: data[0].status === '在线' ? ' #27EC13' : ''
                }"
                >{{ data && data[0].status }}</span
              >
            </p>
            <p>监测时间：{{ data && data[0].monitorTime }}</p>
            <p>监测数据：{{ data && data[0].monitorData }}</p>
          </div>
          <div v-if="mindex === 2" class="chart-box">
            <line-chart
              id="mlinechart"
              :datas="data && data[0].potencyList"
            ></line-chart>
          </div>
        </div>
        <div v-show="cindex === 2" class="alarm-content">
          <div v-if="alarmList.length == 0" class="no-data">
            <div class="null-text">暂无报警</div>
            <!-- <button @click="show">show </button> -->
          </div>
          <div v-else>
            <el-scrollbar height="275px" v-show="!isShow">
              <div class="content-rows">
                <div
                  class="row-box"
                  v-for="(item, index) in alarmList"
                  :key="index"
                >
                  <p
                    :style="{
                      color: item.status === '已办结' ? '#C3C3C6' : '#FFFFFF'
                    }"
                  >
                    <span>报警时间：</span> <span>{{ item.alarmTime }}</span>
                  </p>
                  <p
                    :style="{
                      color: item.status === '已办结' ? '#C3C3C6' : '#FFFFFF'
                    }"
                  >
                    <span>报警状态：</span>
                    <span
                      :style="[
                        {
                          color:
                            item.status === '已办结' ? '#1A8AFB' : '#21C3FF'
                        },
                        {
                          borderColor:
                            item.status === '已办结' ? '#1A8AFB' : '#21C3FF'
                        }
                      ]"
                      class="outerBor"
                      @click="showDetail(index)"
                      >{{ item.status }}</span
                    >
                  </p>
                  <p
                    :style="{
                      color: item.status === '已办结' ? '#C3C3C6' : '#FFFFFF'
                    }"
                  >
                    <span>报警类型：</span> <span>{{ item.level }}</span>
                  </p>
                  <p
                    :style="{
                      color: item.status === '已办结' ? '#C3C3C6' : '#FFFFFF'
                    }"
                  >
                    <span>报警信息：</span>
                    <span>{{ item.information }}</span>
                  </p>
                </div>
              </div>
            </el-scrollbar>
            <div class="content-rows" v-show="isShow">
              <span @click="backList" class="backsty">返回列表</span>
              <div style="margin-top: 20px">
                <p>报警时间：{{ alarmDetail.alarmTime }}</p>
                <p>报警类型：{{ alarmDetail.level }}</p>
                <p>报警信息：{{ alarmDetail.information }}</p>
                <p>报警状态：{{ alarmDetail.status }}</p>
                <p>处置人员：{{ alarmDetail.dealUser }}</p>
                <p>办结时间：{{ alarmDetail.finishiTime }}</p>
                <p>处理结果：{{ alarmDetail.result }}</p>
              </div>
            </div>
            <div
              v-if="alarmTotal > 3"
              class="more-btn"
              :class="arrow === 'up' ? 'more-up' : ''"
              @click="handleMoreAction(page)"
            ></div>
          </div>
        </div>
        <div v-show="cindex === 3" class="datas-content">
          <div class="cbox">
            <p>上次检定时间：{{ data && data[0].lastVerDate }}</p>
            <p>本次检定截止时间：{{ data && data[0].delineVerDate }}</p>
          </div>
        </div>
      </template>
    </popup-box>
  </div>
</template>

<script setup>
import { defineProps, ref, defineEmits, reactive, watch } from 'vue'
import PopupBox from './popupBox.vue'
import LineChart from './LineChart.vue'
import EchartDemo from '@/components/EchartDemo.vue'
const emits = defineEmits(['update:visible'])
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  data: {
    type: Array,
    default: () => []
  }
})
const list = ref(props.data)
const cindex = ref(1)
const mindex = ref(1)
const alarmList = ref(props.data[0].alarmList)
const alarmDetail = ref({})
// const startIndex = ref(0) // 报警信息
const page = ref(1) // 当前页数
const arrow = ref('down') // 默认向下翻页
const alarmTotal = ref(props.data && props.data[0].alarmList.length) //报警总条数

// 控制详情界面显示标识
const isShow = ref(false)
function filterDatas(sourceData, start, len) {
  const res = []
  sourceData.forEach((e, index) => {
    if (index > start - 1 && index < start + len) {
      res.push(e)
    }
  })
  return res
}
const handleTabChange = (val) => {
  cindex.value = val
}
const handleSubChange = (val) => {
  mindex.value = val
}

// 通过点击报警信息页展示详情
const showDetail = (index) => {
  alarmDetail.value = alarmList.value[index]
  // console.log(alarmDetail.value)
  isShow.value = true
}
const backList = () => {
  isShow.value = false
}

const handleMoreAction = (val) => {
  const size = Math.ceil(alarmTotal.value / 3) // 每页显示3条，总页数
  if (val < size && arrow.value === 'down') {
    page.value += 1
    if (val === size - 1) {
      // 翻到了最后一页并且是向下翻页那么调换翻页方向
      arrow.value = 'up'
    }
  } else if (val > 1 && arrow.value === 'up') {
    page.value -= 1
    if (val === 2) {
      arrow.value = 'down'
    }
  }
  alarmList.value = filterDatas(
    list.value[0].alarmList,
    (page.value - 1) * 3,
    3
  )
}
</script>

<style lang="scss" scoped>
.poup-box {
  width: 352px;
  height: 100%;

  .btns-row {
    width: 100%;
    display: flex;
    column-gap: 13px;
    justify-content: center;
    margin-bottom: 10px;
    .btn {
      width: 85px;
      height: 32px;
      background: url(~@@/images/screen/gis/btn_bg.png) no-repeat center 100%;
      cursor: pointer;
      display: flex;
      line-height: 32px;
      justify-content: center;
      > span {
        font-size: 13px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        font-style: italic;
        color: #ffffff;
        background: linear-gradient(0deg, #7da2f7 0%, #caf6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .btn-active {
      width: 85px;
      height: 32px;
      background: url(~@@/images/screen/gis/btn_bg_active.png) no-repeat center
        100%;
      cursor: pointer;
      display: flex;
      line-height: 32px;
      justify-content: center;
      > span {
        font-size: 13px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        font-style: italic;
        color: #f1ffe3;
        background: linear-gradient(0deg, #fffce6 0%, #05cfcf 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  p {
    width: 280px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-style: italic;
    color: #ffffff;
    padding: 0;
    margin: 0;
    margin-bottom: 6px;
    margin-left: 36px;
    margin-right: 26px;
    > span {
      min-width: 100px;
    }
  }
  .monitor-content {
    width: 340px;
    height: 275px;
    position: relative;
    .mbtns {
      display: flex;
      position: absolute;
      top: 1px;
      right: 16px;
      z-index: 2022;
      .mbtn-active {
        width: 40px;
        height: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        font-style: italic;
        color: #00c4f6;
        background: #000;
        border: 1px solid #01b1e3;
        margin-right: 4px;
        cursor: pointer;
      }
      .mbtn {
        @extend.mbtn-active;
        color: rgba(255, 255, 255, 0.3);
      }
    }

    .mcontent {
      width: 352px;
      height: 275px;
      padding-top: 24px;
      box-sizing: content-box;
      overflow-y: auto;
      &::-webkit-scrollbar-track-piece {
        background: transparent;
      }

      &::-webkit-scrollbar {
        width: 5px;
      }

      &::-webkit-scrollbar-thumb {
        background: #1b8cff;
        border-radius: 2px;
      }
    }
    .chart-box {
      width: 100%;
      height: 100%;
    }
  }
  .alarm-content {
    width: 340px;
    height: 275px;
    overflow: hidden;
    position: relative;
    .no-data {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .null-text {
        height: 28px;
        background: url(~@@/images/screen/gis/warn_icon.png) no-repeat;
        background-size: 36px 28px;
        padding-left: 46px;
        font-size: 26px;
        font-family: jdzyt;
        font-style: italic;
        color: #dbfff3b3;
        line-height: 28px;
      }
    }
    .content-rows {
      height: 247px;
      // overflow-y: auto;
      .row-box {
        width: 100%;
        margin-top: 8px;
        border-bottom: 1px solid #01bdf4;
        .outerBor {
          border: solid 1px #1a8afb;
          border-radius: 9px;
          height: 19px;
          font-size: 12px;
          // margin: 0 10px;
          padding: 0 10px;
          color: #1a8afb;
          cursor: pointer;
        }
      }
      .backsty {
        width: 100%;
        font-size: 13px;
        color: #ffffff;
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 2px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        font-style: italic;
        border: 1px solid #03b2e4;
        margin-left: 240px;
      }
    }

    .more-btn {
      width: 28px;
      height: 13px;
      background: url(~@@/images/screen/gis/more-btn.png) no-repeat center /
        100% 100%;
      position: absolute;
      left: 48%;
      bottom: 10px;
      cursor: pointer;
    }
    .more-up {
      transform: rotate(180deg);
    }
  }
  .datas-content {
    width: 352px;
    height: 275px;
    .cbox {
      height: 247px;
      padding-top: 18px;
    }
  }
}
</style>
